<template>
    <z-paging ref="paging" v-model="houList" @query="queryList">
        <u-sticky>
            <view class="heqader_box">
                <hedsty :headCentext="'福利屋'"></hedsty>
            </view>
        </u-sticky>
        <view class="swiper_box">
            <u-swiper radius="0" height="210" circular indicator indicatorMode="dot" :list="swiperList" keyName="image"
                @change="swiperChange" @click="swiperClick" :indicatorStyle="indicatorStyle"
                @swiperChange="swiperChange"></u-swiper>
            <view class="shuaxin_box" @click="$router('/pages/bonus/index')"> 
                <image src="https://morgan.dingxians.cn/static/fuyuri/5.png" mode="scaleToFill" />
            </view>
            <view class="shuaxin_box1" @click="$refs.paging.reload()">
                <image src="https://morgan.dingxians.cn/static/fuyuri/6.png" mode="scaleToFill" />
            </view>
        </view>
        <u-sticky offsetTop="100">
            <view class="fenlei_box">
                <view class="dangeflw_anni_box" v-for="item, index in flwanList" :key="index"
                    @click="$router(item.url)">
                    <image :src="item.img" mode="scaleToFill" />
                </view>
            </view>
        </u-sticky>

        <view class="flw_con_box" v-for="(items, indexs) in houList" :key="indexs"
            @click="$router('/userPage/fuyuri/flwDetail?id=' + items.id)">
            <view class="flwk_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/3.png');">
                <view class="quees">
                    <!--实际数据组 GO-->
                    <view class="quee" v-for="item, index in items.prize_list" :key="index">
                        <image :src="item.image" mode="heightFix"></image>
                    </view>
                    <!--填充数据组 GO-->
                    <view class="quee" v-for="item, index in items.prize_list" :key="index">
                        <image :src="item.image" mode="heightFix"></image>
                    </view>
                </view>
                <view class="flw_name_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/4.png');">
                    <view class="touxiang_box">
                        <image :src="items.avatar" mode="scaleToFill" />
                    </view>
                    <view class="zs_name_box">{{items.nickname}}</view>
                    <view class="zs_jianshu_box">件数：{{ items.prize_num }}</view>
                    <view class="zs_redu_box">热度：{{ items.begin_reward_num }}</view>
                </view>
                <view class="jion_box">
                    <image src="https://morgan.dingxians.cn/static/fuyuri/2.png" mode="scaleToFill" />
                </view>
            </view>
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            swiperList: [{
                id: 1,
                image: 'https://yq.dingxians.cn/upload/20240910/66dfa4bd4440c.jpg'
            },
            {
                id: 2,
                image: 'https://yq.dingxians.cn/upload/20240910/66dfa4bd4440c.jpg'
            },
            {
                id: 3,
                image: 'https://yq.dingxians.cn/upload/20240910/66dfa4bd4440c.jpg'
            }
            ],
            indicatorStyle: {
                bottom: '30rpx',
                right: '30rpx',
            },
            flwanList: [{
                id: 1,
                img: 'https://morgan.dingxians.cn/static/fuyuri/1.png',
                url: '/userPage/fuyuri/zhong'
            },
            {
                id: 2,
                img: 'https://morgan.dingxians.cn/static/fuyuri/9.png',
                url: '/userPage/fuyuri/jionjl'
            },
            {
                id: 3,
                img: 'https://morgan.dingxians.cn/static/fuyuri/8.png',
                url: '/userPage/fuyuri/create'
            },
            ],
            houList:[],
        }
    },
    onLoad() { },
    onShow() {
uni.hideLoading({})
    },
    methods: {
        swiperClick(e) {
            // console.log(e)
        },
        swiperChange(e) {
            // console.log(e)
        },
        testClick(e) {
            console.log(e)
        },
        queryList(pageNo, pageSize) {
			let data = {
				word_command: '',
				page: pageNo,
				limit: pageSize
			}
			this.$Request.get(this.$api.flw.wealRooms, data).then(res => {
				if (res.code == 200) {
					this.$refs.paging.complete(res.data.data)
				}
			})
		},
		// 搜索框内容发生改变触发
		searchChange(value) {
			this.keyword = value
		},
    }
}
</script>
<style lang="scss" scoped>
/deep/.u-swiper {
    background: rgba(255, 255, 255, 0) !important;
}

.heqader_box {
    width: 750rpx;
    height: 447rpx;


}

.swiper_box {
    width: 750rpx;
    height: 318rpx;
    margin: auto;
    margin-bottom: 112rpx;
    margin-top: -252rpx;
    background-color: #fff;
    position: relative;

    .shuaxin_box {
        width: 99rpx;
        height: 113rpx;
        position: absolute;
        top: 60rpx;
        right: 20rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .shuaxin_box1 {
        width: 99rpx;
        height: 113rpx;
        position: absolute;
        top: 200rpx;
        right: 20rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.fenlei_box {
    width: 100%;
    height: 107rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 44rpx;

    .dangeflw_anni_box {
        width: 210rpx;
        height: 107rpx;

        image {
            width: 210rpx;
            height: 107rpx;
        }
    }
}

.flw_con_box {
    width: 690rpx;
    height: 318rpx;
    margin: auto;
    margin-bottom: 33rpx;
    position: relative;

    .flwk_box {
        width: 100%;
        // width: 180rpx;
        height: 290rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-top: 45rpx;
        overflow: hidden;

        .quees {
            width: 180rpx;
            height: 200rpx;
            animation: move 7s linear infinite;
            white-space: nowrap;
            // margin-top: 20rpx;

            .quee {
                max-width: 180rpx;
                height: 200rpx;
                overflow: hidden;
                border-radius: 12rpx;
                display: inline-block;
                margin-right: 20rpx;    

                image {
                    width: 180rpx;
                    height: 200rpx;
                }
            }
        }

        // .quees:hover {
        // 	animation: move 7s linear infinite paused;
        // }

        @keyframes move {

            0% {
                transform: translateX(0rpx);
            }

            100% {
                //无缝重点：图片是300rpx，margin-right是20rpx，那就是需要左移 （300+20）*图片数rpx
                transform: translateX(-600rpx);
            }

        }

        .tupian_pic_box {
            width: 100%;
            height: 200rpx;
            box-sizing: border-box;
            padding-left: 30rpx;
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            overflow-x: auto;

            image {
                display: block;
                height: 100%;
                flex-shrink: 0;
            }
        }
    }

    .flw_name_box {
        position: absolute;
        width: 470rpx;
        height: 90rpx;
        background-size: 100% 100%;
        bottom: 0;
        left: -20rpx;
        box-sizing: border-box;
        padding-left: 45rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .touxiang_box {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 12rpx;

            image {
                width: 50rpx;
                height: 50rpx;
                border-radius: 50%;
            }
        }

        .zs_name_box {
            width: 79rpx;
            height: 90rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 90rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 12rpx;
        }

        .zs_jianshu_box {
            height: 90rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 90rpx;
            margin-right: 12rpx;
        }

        .zs_redu_box {
            height: 90rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #FFFFFF;
            line-height: 90rpx;
        }
    }

    .jion_box {
        width: 164rpx;
        height: 90rpx;
        position: absolute;
        bottom: 0;
        right: 12rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>